<template>
  <div>
    <el-form label-width="80px" size="small">
      <el-form-item label="异步">
        <el-switch v-model="bpmnFormData.async" active-text="是" inactive-text="否" @change="updateElementTask('async')"/>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-select v-model="bpmnFormData.userType" placeholder="选择人员" @change="updateUserType">
          <el-option
            v-for="item in userTypeOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="指定人员" v-if="bpmnFormData.userType === 'assignee'">
        <el-input-tag v-model="bpmnFormData.assignee" :value="bpmnFormData.assignee"/>
        <el-button-group class="ml-4" style="margin-top: 4px">
          <!--指定人员-->
          <el-tooltip class="box-item" effect="dark" content="指定人员" placement="bottom">
            <el-button size="default" type="primary" icon="User" @click="singleUserCheck"/>
          </el-tooltip>
          <!--选择表达式-->
          <el-tooltip class="box-item" effect="dark" content="选择表达式" placement="bottom">
            <el-button size="default" type="warning" icon="Postcard" @click="singleExpCheck"/>
          </el-tooltip>
        </el-button-group>
      </el-form-item>

      <el-form-item label="候选人员" v-else-if="bpmnFormData.userType === 'candidateUsers'">
        <el-input-tag v-model="bpmnFormData.candidateUsers" :value="bpmnFormData.candidateUsers"/>
        <el-button-group class="ml-4" style="margin-top: 4px">
          <!--候选人员-->
          <el-tooltip class="box-item" effect="dark" content="候选人员" placement="bottom">
            <el-button size="default" type="primary" icon="User" @click="multipleUserCheck"/>
          </el-tooltip>
          <!--选择表达式-->
          <el-tooltip class="box-item" effect="dark" content="选择表达式" placement="bottom">
            <el-button size="default" type="warning" icon="Postcard" @click="singleExpCheck"/>
          </el-tooltip>
        </el-button-group>
      </el-form-item>

      <el-form-item label="候选角色" v-else>
        <el-input-tag v-model="bpmnFormData.candidateGroups" :value="bpmnFormData.candidateGroups"/>
        <el-button-group class="ml-4" style="margin-top: 4px">
          <!--候选角色-->
          <el-tooltip class="box-item" effect="dark" content="候选角色" placement="bottom">
            <el-button size="default" type="primary" icon="User"  @click="multipleRoleCheck"/>
          </el-tooltip>
          <!--选择表达式-->
          <el-tooltip class="box-item" effect="dark" content="选择表达式" placement="bottom">
            <el-button size="default" type="warning" icon="Postcard" @click="singleExpCheck"/>
          </el-tooltip>
        </el-button-group>
      </el-form-item>

      <el-form-item label="优先级">
        <el-input v-model="bpmnFormData.priority" @change="updateElementTask('priority')"/>
      </el-form-item>
      <el-form-item label="到期时间">
        <el-input v-model="bpmnFormData.dueDate" @change="updateElementTask('dueDate')"/>
      </el-form-item>
    </el-form>

    <!--选择人员-->
    <el-dialog
      title="选择人员"
      v-model="userVisible"
      width="60%"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <flow-user v-if="userVisible" :checkType="checkType" :selectValues="selectData.assignee || selectData.candidateUsers" @handleUserSelect="userSelect"></flow-user>
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button size="default" @click="userVisible = false">取 消</el-button>
        <el-button size="default" type="primary" @click="checkUserComplete">确 定</el-button>
      </div>
    </el-dialog>

    <!--选择角色-->
    <el-dialog
      title="选择候选角色"
      v-model="roleVisible"
      width="60%"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <flow-role v-if="roleVisible" :selectValues="selectData.candidateGroups" @handleRoleSelect="roleSelect"></flow-role>
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button size="default" @click="roleVisible = false">取 消</el-button>
        <el-button size="default" type="primary" @click="checkRoleComplete">确 定</el-button>
      </div>
    </el-dialog>

    <!--选择表达式-->
    <el-dialog
      title="选择表达式"
      v-model="expVisible"
      width="60%"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <flow-exp v-if="expVisible" :selectValues="selectData.exp" @handleSingleExpSelect="expSelect"></flow-exp>
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button size="default" @click="expVisible = false">取 消</el-button>
        <el-button size="default" type="primary" @click="checkExpComplete">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch, getCurrentInstance } from 'vue';
import FlowUser from '@/components/flow/User';
import FlowRole from '@/components/flow/Role';
import FlowExp from '@/components/flow/Expression';
import ElInputTag from '@/components/flow/ElInputTag';
import { StrUtil } from '@/utils/StrUtil';

/** 组件传值  */
const props = defineProps({
  id: {
    type: String,
    required: true
  },
});

const emit = defineEmits(['update:modelValue']);

const userVisible = ref(false);
const roleVisible = ref(false);
const expVisible = ref(false);
const checkType = ref('single');    // 选类
// const userType = ref('');
const userTypeOption = ref([
  { label: '指定人员', value: 'assignee' },
  { label: '候选人员', value: 'candidateUsers' },
  { label: '候选角色', value: 'candidateGroups' }
]);
const bpmnFormData = ref({
  userType: "",
  assignee: "",
  candidateUsers: "",
  candidateGroups: "",
  dueDate: "",
  priority: "",
  dataType: "",
  expId: "",
});

// 数据回显
const selectData = ref({
  assignee: null,
  candidateUsers: null,
  candidateGroups: null,
  exp: null,
});
const otherExtensionList = ref([]);

const { proxy } = getCurrentInstance();
const modelerStore = proxy.modelerStore;

// 初始化表单
const resetTaskForm = () => {
  bpmnFormData.value = {
    userType: "assignee",
    assignee: "",
    candidateUsers: "",
    candidateGroups: "",
    dueDate: "",
    priority: "",
    dataType: "",
    expId: "",
  };
  selectData.value = {
    assignee: null,
    candidateUsers: null,
    candidateGroups: null,
    exp: null,
  };

  // 流程节点信息上取值
  for (let key in bpmnFormData.value) {
    const value = modelerStore.element?.businessObject[key] || bpmnFormData.value[key];
    bpmnFormData.value[key] = value;
  }
  // 人员信息回显
  checkValuesEcho(bpmnFormData.value);
};

// 更新节点信息
const updateElementTask = (key) => {
  const taskAttr = {};
  taskAttr[key] = bpmnFormData.value[key] || "";
  modelerStore.modeling.updateProperties(modelerStore.element, taskAttr);
};

// 更新自定义流程节点/参数信息
const updateCustomElement = (key, value) => {
  const taskAttr = Object.create(null);
  taskAttr[key] = value;
  modelerStore.modeling.updateProperties(modelerStore.element, taskAttr);
};

// 更新人员类型
const updateUserType = (val) => {
  // 删除xml中已选择数据类型节点
  deleteFlowAttar();
  delete modelerStore.element.businessObject[`userType`];
  // 清除已选人员数据
  bpmnFormData.value[val] = null;
  selectData.value = {
    assignee: null,
    candidateUsers: null,
    candidateGroups: null,
    exp: null,
  };
  // 写入userType节点信息到xml
  updateCustomElement('userType', val);
};

// 设计器右侧表单数据回显
const checkValuesEcho = (formData) => {
  if (StrUtil.isNotBlank(formData.expId)) {
    getExpList(formData.expId, formData.userType);
  } else {
    if ("candidateGroups" === formData.userType) {
      getRoleList(formData[formData.userType], formData.userType);
    } else {
      getUserList(formData[formData.userType], formData.userType);
    }
  }
};

// 获取表达式信息
const getExpList = (val, key) => {
  if (StrUtil.isNotBlank(val)) {
    const exp = modelerStore.expList?.find(item => item.id.toString() === val);
    if (exp) {
      bpmnFormData.value[key] = exp.name;
      selectData.value.exp = exp.id;
    }
  }
};

// 获取人员信息
const getUserList = (val, key) => {
  if (StrUtil.isNotBlank(val)) {
    const newArr = modelerStore.userList?.filter(i => val.toString().split(',').includes(i.userId.toString()));
    if (newArr) {
      bpmnFormData.value[key] = newArr.map(item => item.nickName).join(',');
      if ('assignee' === key) {
        selectData.value[key] = newArr.find(item => item.userId.toString() === val.toString()).userId;
      } else {
        selectData.value[key] = newArr.map(item => item.userId);
      }
    }
  }
};

// 获取角色信息
const getRoleList = (val, key) => {
  if (StrUtil.isNotBlank(val)) {
    const newArr = modelerStore.roleList?.filter(i => val.split(',').includes(i.roleId.toString()));
    if (newArr) {
      bpmnFormData.value[key] = newArr.map(item => item.roleName).join(',');
      if ('assignee' === key) {
        selectData.value[key] = newArr.find(item => item.roleId.toString() === val).roleId;
      } else {
        selectData.value[key] = newArr.map(item => item.roleId);
      }
    }
  }
};

// ------ 流程审批人员信息弹出框 start---------
/*单选人员*/
const singleUserCheck = () => {
  userVisible.value = true;
  checkType.value = "single";
};

/*多选人员*/
const multipleUserCheck = () => {
  userVisible.value = true;
  checkType.value = "multiple";
};

/*单选角色*/
const singleRoleCheck = () => {
  roleVisible.value = true;
  checkType.value = "single";
};

/*多选角色*/
const multipleRoleCheck = () => {
  roleVisible.value = true;
};

/*单选表达式*/
const singleExpCheck = () => {
  expVisible.value = true;
};

// 表达式选中数据
const expSelect = (selection) => {
  if (selection) {
    deleteFlowAttar();
    bpmnFormData.value[bpmnFormData.value.userType] = selection.name;
    updateCustomElement('dataType', selection.dataType);
    updateCustomElement('expId', selection.id.toString());
    updateCustomElement(bpmnFormData.value.userType, selection.expression);
    handleSelectData("exp", selection.id);
  }
};

// 用户选中数据 TODO: 后面更改为 点击确认按钮再赋值人员信息
const userSelect = (selection) => {
  if (selection) {
    deleteFlowAttar();
    updateCustomElement('dataType', 'fixed');
    if (Array.isArray(selection)) {
      const userIds = selection.map(item => item.userId);
      const nickName = selection.map(item => item.nickName);

      bpmnFormData.value[bpmnFormData.value.userType] = nickName.join(',');
      updateCustomElement(bpmnFormData.value.userType, userIds.join(','));
      handleSelectData(bpmnFormData.value.userType, userIds);
    } else {
      bpmnFormData.value[bpmnFormData.value.userType] = selection.nickName;
      updateCustomElement(bpmnFormData.value.userType, selection.userId);
      handleSelectData(bpmnFormData.value.userType, selection.userId);
    }
  }
};

// 角色选中数据
const roleSelect = (selection, name) => {
  if (selection && name) {
    deleteFlowAttar();
    bpmnFormData.value[bpmnFormData.value.userType] = name;
    updateCustomElement('dataType', 'fixed');
    updateCustomElement(bpmnFormData.value.userType, selection);
    handleSelectData(bpmnFormData.value.userType, selection);
  }
};

// 处理人员回显
const handleSelectData = (key, value) => {
  for (let oldKey in selectData.value) {
    if (key !== oldKey) {
      selectData.value[oldKey] = null;
    } else {
      selectData.value[oldKey] = value;
    }
  }
};

/*用户选中赋值*/
const checkUserComplete = () => {
  userVisible.value = false;
  checkType.value = "";
};

/*候选角色选中赋值*/
const checkRoleComplete = () => {
  roleVisible.value = false;
};

/*表达式选中赋值*/
const checkExpComplete = () => {
  expVisible.value = false;
};

// 删除节点
const deleteFlowAttar = () => {
  delete modelerStore.element.businessObject[`dataType`];
  delete modelerStore.element.businessObject[`expId`];
  delete modelerStore.element.businessObject[`assignee`];
  delete modelerStore.element.businessObject[`candidateUsers`];
  delete modelerStore.element.businessObject[`candidateGroups`];
};

/** 传值监听 */
watch(() => props.id, (newVal) => {
  if (StrUtil.isNotBlank(newVal)) {
    resetTaskForm();
  }
}, { immediate: true });  // 立即生效

</script>